<template>
    <div class="app-container">
        <el-form :inline="true" :model="searchObj" class="demo-form-inline">
            <el-form-item label="医院名称">
                <el-input v-model="searchObj.hosname" placeholder="医院名称"></el-input>
            </el-form-item>

            <el-form-item label="医院编号">
                <el-input v-model="searchObj.hoscode" placeholder="医院编号"></el-input>
            </el-form-item>
        
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table
            ref="multipleTable"
            :data="hospitalSetList"
            tooltip-effect="dark"
            style="width: 100%"
            v-loading="loading"
            element-loading-text="拼命加载中"
            border
            @selection-change="handleSelectionChange">

            <el-table-column
                type="selection"
                width="55">
            </el-table-column>

            <el-table-column
            width="50"
            label="序号">
                <template slot-scope="scope">
                    {{ (pageNum-1)*pageSize +scope.$index+1 }}
                </template>
            </el-table-column>

            <el-table-column
                prop="hosname"
                label="医院名称"
                show-overflow-tooltip>
            </el-table-column>

            <el-table-column
                prop="hoscode"
                label="医院编号"
                show-overflow-tooltip>
            </el-table-column>

            <el-table-column
                prop="apiUrl"
                label="医院网址"
                show-overflow-tooltip>
            </el-table-column>

            <el-table-column
                prop="contactsName"
                label="联系人姓名"
                show-overflow-tooltip>
            </el-table-column>

            <el-table-column
                prop="contactsPhone"
                label="联系人手机"
                show-overflow-tooltip>
            </el-table-column>

            <el-table-column label="状态">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.status==0" type="primary" size="mini" 
                         @click="lockHostSet(scope.row.id,1)">可用状态 , 点击锁定&nbsp;<i class="el-icon-lock"></i></el-button>
                    <el-button v-if="scope.row.status==1" type="danger" size="mini" 
                         @click="lockHostSet(scope.row.id,0)">不可用状态 , 取消锁定&nbsp;<i class="el-icon-unlock"></i></el-button>
                </template>
            </el-table-column>
            
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    @click="handleEdit(scope.row.id)">编辑&nbsp;<i class="el-icon-edit"></i></el-button>
                    <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.row.id)">删除&nbsp;<i class="el-icon-delete"></i></el-button>
                </template>
            </el-table-column>
        </el-table>
        
        <el-button type="danger" @click="batchRemove">批量删除&nbsp;<svg-icon icon-class="piliangshanchu"/></el-button>
    
        <el-pagination
            @current-change="findPage"
            :current-page="pageNum"
            :page-size="pageSize"
            style="text-align: center;"
            layout="total, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </div>
</template>
<script>

    import hospitalSet from '@/api/hospitalSet'

    export default{
        data(){
            return{
                loading:true,
                hospitalSetList: null,
                pageNum: 1,
                pageSize: 3,
                searchObj:{
                    hosname:null,
                    hoscode:null
                },
                total: 0,
                multipleSelection: []
            }
        },
        methods:{
            lockHostSet(id,status){
                this.$confirm('此操作将改变医院状态, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    return hospitalSet.updateStatus(id,status);
                }).then(resp=>{
                    this.$message({
                        type: 'success',
                        message: '修改状态成功!'
                    });
                    this.findPage();
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消状态修改!'
                    });          
                });
            },
            handleEdit(id){
                this.$router.push('/yygh/hospitalSet/update/' + id);
            },
            batchRemove(){
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var ids = [];
                    for(var i = 0;i < this.multipleSelection.length;i++){
                        ids.push(this.multipleSelection[i].id);
                    }
                    return hospitalSet.batchRemove(ids);
                }).then(resp=>{
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.findPage();
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                });
            },
            handleDelete(id){
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    return hospitalSet.deleteHospitalSet(id)
                }).then(resp=>{
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.findPage(this.pageNum);
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                });
            },
            onSubmit(){
                this.findPage();
            },
            findPage(page = 1){
                this.pageNum = page;
                hospitalSet.getHospitalSetPage(this.pageNum,this.pageSize,this.searchObj).then(resp=>{
                    
                    this.hospitalSetList = resp.data.list;
                    this.total = resp.data.total;
                    this.loading=false;
                });
            },
            
            handleSelectionChange(val) {
                this.multipleSelection = val;
            }
        },
        created(){
            this.findPage();
        }
    }
</script>